<template>
	<view>
		
		<!-- 搜索栏 -->
		<view style="margin-top: 150rpx; display: flex; justify-content: flex-start; align-items: center; width: 100%;">
			<view
				style="height: 80rpx; width: 620rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; margin-left: 25rpx; display: flex; justify-content: flex-start; align-items: center; font-size: 40rpx;">
				<view style="margin-left: 20rpx;" class="cuIcon-search"></view>
				<input placeholder-style="font-size: 25rpx;" style="width: 440rpx;" placeholder="请输入搜索内容..." />
				<view style="margin-left: 60rpx;" class="cuIcon-voice"></view>
			</view>
			<view style="font-size: 40rpx; margin-left: 20rpx;" class="cuIcon-scan"></view>
		</view>


		<!-- 轮播图 -->
		<swiper indicator-dots autoplay interval="3000" style="width: 100%;">
			<swiper-item>
				<image src="https://bkimg.cdn.bcebos.com/pic/d009b3de9c82d158ccbf88d82b440ed8bc3eb135e401">
				</image>
			</swiper-item>
			<swiper-item>
				<image src="https://bkimg.cdn.bcebos.com/pic/d009b3de9c82d158ccbf88d82b440ed8bc3eb135e401">
				</image>
			</swiper-item>
			<swiper-item>
				<image src="https://bkimg.cdn.bcebos.com/pic/d009b3de9c82d158ccbf88d82b440ed8bc3eb135e401">
				</image>
			</swiper-item>
		</swiper>

		<view style="margin-top: 10rpx;  box-shadow: 0px 2px 5px #f2f6fc;">
			<u-tabs active-color="#303133" inactive-color="#606266" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<view>
			<view style="margin-top: 10rpx;">
				<view>
					<view v-if="current == 0"
						style="width: 100%; height: 180rpx; box-shadow: 0px 2px 5px #f2f6fc; display: flex; align-items: center;">
						<view style="display: flex; justify-content: space-between;">
							<view>
								<image mode="aspectFit" style="height: 170rpx; width: 180rpx; margin-left: 25rpx;"
									src="https://img2.baidu.com/it/u=4110627428,1113908428&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427">
								</image>
							</view>
							<view
								style="width: 300rpx; font-size: 25rpx; color: #606266; display: flex; flex-direction: column; justify-content: center; margin-left: 25rpx;">
								<view>淳化街道天景山文化体育休闲公园足球场</view>
								<view
									style="display: flex; justify-content: flex-start; align-items: center; margin-top: 30rpx;">
									<view>
										<text class="cuIcon-location"></text>
										<text>北京市</text>
									</view>
									<view style="margin-left: 40rpx;">七十一</view>
								</view>
							</view>
						</view>
						<view>
							<view
								style="font-size: 25rpx; color: #606266; display: flex; flex-direction: column; justify-content: center; margin-left: 25rpx; align-items: center;">
								<view>
									<text class="cuIcon-location"></text>
									<text>3.2km</text>
								</view>
							</view>
						</view>
					</view>
				
				<view v-if="current == 1">
					<scroll-view scroll-y="true" class="scroll-Y" @touchmove.stop :style="{
						'height': scrollHeight
							}">
						<view>

							<view v-for="item in test" class="scroll-view-item_X"
								:style="{
								'height':'15vh',
								'width':'auto',
								'box-shadow':'0 0 1px rgba(45, 45, 45, 0.1)',
								'display':'flex'
									}">

								<image :src='item.content' :style="{
									'border-radius':'10rpx',
									'align-self': 'center',
									'margin-right':'5rpx',
									'margin-left':'5rpx',
									'height': '95%',
									'width': '30%',									
										}"></image>

								<view :style="{
									'line-height': '12rpx'
										}">
									<view :style="{
										'margin-top': '27rpx',
										'font-size': '40rpx'
											}">
										{{item.des}}
									</view>
									<view :style="{
										'margin-top': '27rpx',
										'font-size': '30rpx',
										'color': '#909399'
										}">
										距离：{{item.len}}km
									</view>
								</view>

							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<view v-if="current == 2">
				<text>这是第三个界面</text>
			</view>
			<view v-if="current == 3">
				<text>这是第四个界面</text>
			</view>
		</view>
		<!-- 其他内容省略 -->

		<!-- 悬浮按钮 -->
		<view class="float-button" @click="toindex">
			<text class="cuIcon-map"></text>
		</view>
	</view>
	</view>
</template>

<script>
	import Util from "../../libs/util.js"
	//console.log( uni.getWindowInfo().windowHeight)
	export default {
		data() {
			return {
				list: [{
						name: '推荐球场'
					}, {
						name: '足坛快讯'
					}, {
						name: '附近活动'
					},
					{
						name: '好物快抢'
					}
				],
				test: [{
					id: 1,
					content: 'https://img1.baidu.com/it/u=4262712865,2305885394&fm=253&fmt=auto&app=120&f=JPEG?w=380&h=380',
					des: '足球场1',
					len: 1,
				}, {
					id: 2,
					content: 'https://img1.baidu.com/it/u=2867757728,1865737742&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500',
					des: '足球场2',
					len: 2,
				}, {
					id: 3,
					content: 'https://img1.baidu.com/it/u=2077120137,558466044&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
					des: '足球场3',
					len: 3,
				}, {
					id: 4,
					content: 'https://img0.baidu.com/it/u=309850890,1390279723&fm=253&fmt=auto&app=138&f=JPEG?w=938&h=500',
					des: '足球场4',
					len: 4,
				}],
				current: 0
			}
		},
		methods: {
			toindex() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			change(index) {
				this.current = index;
			},

		}
	}
</script>

<style>
	.scroll-view-item_X {
		display: inline-block;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-Y {
		height: 590rpx;
	}

	.float-button {
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #FF0000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 40rpx;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
</style>